<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="contentBox mainpadding" v-for="item in list.data" :key="item.id">
			<div class="flexleft">
				<div class="text_ft color_theme margin_right2" v-show="item.state==3">· 已处理</div>
				<div class="text_ft color_orange margin_right2" v-show="item.state==1">· 待处理</div>
				<div class="text_ft color_three">{{item.createtime_text}}</div>
			</div>
			<div class="margin_top2 text_f color_three">{{item.content}}</div>
			<div class="flexleft flex_wrap">
				<div class="margin_top2 img_box" v-for="ite in item.images_arr" :key="ite">
					<img :src="ite" alt="">
				</div>
			</div>
			<div class="margin_top2 replyBox word_wrap" v-if="item.state==3" v-html="item.reply"></div>
		</div>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		feedback_list
	} from "@/API/system"
	export default{
		data(){
			return {
				page:1,
				list:{
					data:[]
				}
			}
		},
		created() {
			this.init()
		},
		methods:{
			init(page) {
				feedback_list({
					page: page || 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox{
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
	}
	.img_box {
		width: 20%;
	
		// display: flex;
		// justify-content: center;
		img {
			width: 121px;
			height: 122px;
			border-radius: 9px 9px 9px 9px;
		}
	}
	.replyBox{
		padding: 15px;
		background: rgba(52, 120, 245, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}
</style>